<template>
    <div class="DAUdnudata" ref="daudnudata">

    </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { onMounted, ref } from "vue";
const daudnudata = ref(null)
const option = {
    title: {
        text: '近一年的DAU/DNU'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['DAU', 'DNU'],
        icon: 'circle'
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '13%',
        height: '73%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            min: 0,
            max: 600,
            splitNumber: 6 // 设置 Y 轴分割成 5 段
        }
    ],
    series: [
        {
            name: 'DAU',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [110, 120, 90, 130, 60, 240, 200, 150, 70, 210, 200, 220]
        },
        {
            name: 'DNU',
            type: 'line',
            stack: 'Total',
            areaStyle: {},
            emphasis: {
                focus: 'series'
            },
            data: [150, 170, 100, 180, 90, 180, 120, 180, 190, 130, 110, 210]
        }
    ]
}
onMounted(() => {
    var myChart = echarts.init(daudnudata.value);
    option && myChart.setOption(option);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
})
</script>

<style scoped lang="scss">
.DAUdnudata {
    width: 100%;
    height: 100%;
}
</style>
